<template>
  <div>
    <div v-if="id">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
      <van-panel v-for="item in 5" :key="item.id">
        <template #header>
          <Swipe :swipe="swipe"/>
        </template>
        <template #footer>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="5">
              <van-image
                round
                width="15vw"
                height="15vw"
                src="http://q1.qlogo.cn/g?b=qq&nk=42964179&s=640"
              />
            </van-col>
            <van-col span="13">
              Shop-name
            </van-col>
            <van-col span="6">
              <van-button size="small" type="dark" to="/m/store/index">进店逛</van-button>
            </van-col>
          </van-row>
        </template>
      </van-panel>
      </van-pull-refresh>
    </div>
    <div v-else>
      <van-empty image="error" description="错误502，请尝试刷新">
        <van-button round type="dark" class="bottom-button">
          刷新
        </van-button>
      </van-empty>
    </div>
  </div>
</template>

<style>
  .bottom-button {
    width: 160px;
  }
</style>

<script>
import Swipe from '@/components/Vant/swipe.vue';

export default {
  props: {
    id: Array,
  },
  components: {
    Swipe,
  },
  data() {
    return {
      list: null,
      list_height: null,
      isLoading: null,
      swipe: {
        indicator_color: 'white', // 指示器颜色
        autoplay: 10000, // 切换时间，单位毫秒
        // 图片样式
        image: {
          radius: 0, // 圆角半径
          // size_height: null, // 图片高度
        },
        // 图片列表
        list: [
          {
            way: false, // 跳转链接方式，true为url地址跳转，false为路由跳转
            href: 'http://www.baidu.com',
            // image: 'https://img.yzcdn.cn/vant/cat.jpeg',
            image: null,
          },
          {
            way: false,
            href: 'http://www.google.com',
            // image: 'https://img.yzcdn.cn/vant/cat.jpeg',
          },
          {
            way: true,
            href: 'http://www.baidu.cn',
            image: 'https://img.yzcdn.cn/vant/cat.jpeg',
          },
        ],
      },
    };
  },
  methods: {
    onValue() {
      let id = this.id;
      if (id) {
        console.log('值有变动', id);
        // this.list = this.id;
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
  watch: {
    // 检测ID然后执行指定方法
    id: {
      handler: 'onValue',
      immediate: true,
    },
  },
  mounted() {
    /*
    if (!this.id) {
      this.id = 10009;
    }
    */
    let w = document.documentElement.clientWidth;
    this.list_height = w * 0.25;
  },
};
</script>
